<template>
  <!-- This footer should hidden by default and shown when there are todos -->
  <footer class="footer" v-if="$store.state.list.length>0">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count">
      <strong>{{ $store.state.list.filter(item => !item.done).length }}</strong> item left
    </span>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" @click="cleanTodo">Clear completed</button>
  </footer>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    cleanTodo() {
      this.$store.commit("cleanTodo");
    }
  }
};
</script>

<style>
</style>
